@import "styles/theme_colors";
@import "styles/mixins";

.header {
  composes: pt-4 pb-4 from global;

  background-color: $bg_modal;

  height: 88px;

  nav {
    @include container_center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        list-style: none;
      }
    }

    .header_logo {
      @include flex_center;
    }

    .header_button {
      display: flex;
      align-content: center;

      padding: 16px;

      border-radius: 35px;

      transition: .5s all ease-in-out;

      color: $theme_light;

      svg {
        margin-right: 8px;

        transition: inherit;

        fill: $theme_light;
      }
    }

    .active {
      color: $theme_white;

      svg {
        fill: $theme_white;
      }
    }

    .header_button:hover {
      box-shadow: 0 0 6px 1px $theme_light;
      color: $theme_white;

      svg {
        fill: $theme_white
      }
    }

    .header_button:last-child {
      float: right;
    }

    a[class="active"] {
      button {
        color: $theme_white;
      }

      svg {
        fill: $theme_white;
      }
    }

    a[class="not_active"] {
      color: $theme_light;

      svg {
        fill: $theme_light;
      }
    }


  }
}


